﻿@import "tooltips.less";

/* Content -> Timeline */

ul.timeline-captions,
ul.timeline-captions li {
    
    list-style-type: none;
    list-style-image: none;
}

.timeline-captions {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    margin: 0;
    padding: 0;
}

.timeline-tick {
    float: left;
    width: 16.6667%;
    height: @main-header-secondary-height - 1;
    color: #333333;
    text-align: center;
    font-size: 12px;
    line-height: @main-header-secondary-height;
    position: relative;

    transition: color 1s ease;
}

.timeline-tick:first-child {
    color: #AAAAAA;
}

.timeline-tick:hover {
    background: #E9E9E9;
}

.timeline-tick span::before {
    content: '';
    display: block;
    position: absolute;
    height: 3px;
    width: 50%;
    left: 0;
    bottom: 0;
    border-right: 1px solid #AAAAAA;
}

.timeline-grid {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0;
}

.timeline-grid-item {
    float: left;
    position: relative;
    width: 16.6667%;
    height: 100%;

    .major, .minor {
        border-right: 1px dashed #DDDDDD;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .major {
        right: 0;
        left: 50%;
    }

    .minor {
        left: 0;
        right: 50%;
    }

    &.active {
        background: @active-light;

        .minor {
            border-right: 1px dashed @active;
        }
    }
}

.timeline-grid-item div {
    float: left;
    height: 100%;
    width: 50%;
    border-right: 1px dashed #DDDDDD;
}

.timeline-item {
    position: absolute;
    top: 3px;
    height: 14px;
    background: @bg-activity-normal;
    min-width: 2px;
    cursor: pointer;

    &:hover {
        background: @bg-activity-normal-hover;
    }

    &.faulted {
        background: @bg-activity-error;
    }

    &.faulted:hover {
        background: @bg-activity-error-hover;
    }
}

@timeline-global-pick-height: 6px;
@timeline-global-pick-width: 6px;
@timeline-body-width: 1px;

.timeline-global-item {
    position: absolute;
    width: @timeline-body-width;
    z-index: 10;

    /*
    .timeline-tooltip {
        top: 0;
        left: @timeline-global-pick-width + @timeline-global-pick-height + @timeline-global-pick-height/2;
    }*/

    .timeline-marker-title {
        display: none;
    }

    .timeline-marker-pick {
        position: absolute;
        top: (@data-row-height - @timeline-global-pick-height) / 2;
        left: 0;
        width: @timeline-global-pick-width;
        height: @timeline-global-pick-height;
    }

    .timeline-marker-arrow {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-top: @timeline-global-pick-width/2 solid transparent;
        border-bottom: @timeline-global-pick-width/2 solid transparent;
        border-left: @timeline-global-pick-height/2 solid darken(#38C049, 10%);
        position: absolute;
        top: (@data-row-height - @timeline-global-pick-height) / 2;
        left: @timeline-global-pick-width;
    }

    .timeline-marker-body {
        position: absolute;
        top: (@data-row-height + @timeline-global-pick-height) / 2;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .timeline-marker-pick,
    .timeline-marker-body {
        background: darken(#38C049, 10%);
    }
}

.timeline-global-item.paused,
.timeline-global-item.standby,
.timeline-global-item.shutdown {
    .timeline-tooltip {
        left: auto;
        right: -5px - @timeline-global-pick-width - @timeline-global-pick-height/2;
    }

    .timeline-marker-pick {
        right: 0;
        left: auto;
    }

    .timeline-marker-arrow {
        border-right: @timeline-global-pick-height/2 solid darken(#E5D45B, 10%);
        border-left: none;
        left: auto;
        right: @timeline-global-pick-width;
    }

    .timeline-marker-pick,
    .timeline-marker-body {
        background: darken(#E5D45B, 10%);
    }
}

.timeline-global-item.shutdown {
    .timeline-marker-arrow {
        border-right-color: #933;
    }

    .timeline-marker-pick,
    .timeline-marker-body {
        background: #933;
    }
}

.timeline-global-item.standby {
    .timeline-marker-arrow {
        border-right-color: #DDDDDD;
    }

    .timeline-marker-pick,
    .timeline-marker-body {
        background: #DDDDDD;
    }
}

/* Back layer (tooltips, global objects) */

.timeline-back-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%
}